<script setup>
import {ref} from "vue";
import {useOrderInfoStore} from "@/stores/index.js";
import {orderCancelById, orderDeleteById, orderInfoGetByUserId, orderPageQuery} from "@/api/orderInfo.js";
import {ElMessage} from "element-plus";

// 标题的点击样式
const textList = ref([
  {
    id: 1,
    title: "全部订单"
  },
  {
    id: 2,
    title: "待付款"
  },
  {
    id: 3,
    title: "待收货/使用"
  },
  {
    id: 4,
    title: "待评价"
  }
])
const textId = ref(1)
const active = (id) => {
  textId.value = id
}
// 数据渲染
// 获取订单列表
const orderStore = useOrderInfoStore()
const userId = orderStore.orderInfo.userId
const pageModel = ref({
  currentPage: 1,
  pageSize: 5,
})
const list = ref([])
const handleCurrentChange = async (newPage) => {
  pageModel.value.currentPage = newPage
  const res = await orderPageQuery(pageModel.value.currentPage,
      pageModel.value.pageSize, userId)
  list.value = res.data.records
}
handleCurrentChange(1)
// 删除订单
const deleteOrderById = async (id) => {
  await orderDeleteById(id)
  ElMessage.success("删除成功")
  await handleCurrentChange(pageModel.value.currentPage)
}
// 取消订单
const cancelOrder = async (id) => {
  await orderCancelById(id, 0)
  await handleCurrentChange(pageModel.value.currentPage)
  ElMessage.success("取消成功")
}
</script>

<template>
  <div class="common-layout" v-if="list">
    <el-container>
      <!--      头部标题-->
      <el-header>
        <ul class="extra">
          <li v-for="item in textList" :key="item.id">
            <a
                @click="active(item.id)"
                :class="{ 'txt' : item.id === textId }"
                href="javascript:void(0);">
              {{ item.title }}
            </a>
          </li>
        </ul>
      </el-header>
      <!--      中间展示-->
      <el-main>
        <div class="tip-box">
          <table class="order-table">
            <!--            表格头部-->
            <thead>
            <tr>
              <th>
                <div class="ordertime">
                  <div class="time-txt">
                    近三个月订单
                  </div>
                </div>
                <div class="order-detail">订单详情</div>
              </th>
              <th>收货人</th>
              <th>金额</th>
              <th>订单状态</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody v-for="item in list" :key="item.id">
            <tr class="sep-row">
              <td colspan="5"></td>
            </tr>
            <tr class="tr-th">
              <td colspan="5">
                <span class="gap"></span>
                <span class="deatiltime">{{ item.createTime }}</span>
                <span class="number">
                  订单号：{{ item.id }}
                </span>
                <div
                    @click="deleteOrderById(item.id)"
                    class="dele-box">
                  <span class="delete">
                    删除</span>
                </div>
              </td>
            </tr>
            <!--            商品展示-->
            <tr class="tr-td">
              <td class="tit">
                <div class="goods-item">
                  <div class="p-img">
                    <img :src=item.image alt="">
                  </div>
                  <div class="p-msg">{{ item.title }}</div>
                </div>
                <div class="goods-number"> x{{ item.quantity }}</div>
                <div class="goods-repair">
                  <!--                  下拉框-->
                  <el-dropdown v-if="item.status !== 0">
                    <span class="el-dropdown-link">
                      申请售后
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item v-if="item.status === 1">退款</el-dropdown-item>
                        <el-dropdown-item v-if="item.status >= 2">仅退款</el-dropdown-item>
                        <el-dropdown-item v-if="item.status >= 2">退货退款</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                  <a v-else href="javascript:void(0);">再次购买</a>
                </div>
              </td>
              <td class="name" rowspan="1">
                <div class="consignee">
                  <span class="txt">{{ item.recipientName }}</span>
                </div>
              </td>
              <td rowspan="1">
                <div class="amount">
                  <span class="price">{{ parseFloat(item.totalPrice).toFixed(2) }}</span>
                  <br>
                  <span class="ftx">在线支付</span>
                </div>
              </td>
              <td rowspan="1">
                <div class="status">
                  <span v-if="item.status === 0" class="order-status">已取消</span>
                  <span v-else-if="item.status === 1" class="order-status">待发货</span>
                  <span v-else-if="item.status === 2" class="order-status">运送中</span>
                  <span v-else-if="item.status === 3" class="order-status">派送中</span>
                  <span v-else-if="item.status === 4" class="order-status">已完成</span>
                  <br>
                  <a
                      v-if="item.status === 0"
                      href="javascript:;"
                      class="orderlist">
                    再次购买
                  </a>
                  <a
                      v-else
                      @click="item.status !== 4 ? cancelOrder(item.id) : null"
                      href="javascript:;"
                      class="orderlist">
                    {{ item.status === 4 ? '订单详情' : '取消订单' }}
                  </a>
                </div>
              </td>
              <td rowspan="1">
                <div class="operate">
                  <a href="javascript:;" class="orderinfo">查看发票</a>
                  <br>
                  <a href="javascript:;">评价 | 晒单</a>
                </div>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </el-main>
      <div class="page">
        <el-pagination
            @current-change="handleCurrentChange"
            :page-size="pageModel.pageSize"
            v-model:current-page="pageModel.currentPage"
            :pager-count="list.length"
            :page-count="6"
            background
            layout="prev, pager, next, total"
            :total="list.length"/>
      </div>
    </el-container>
  </div>
</template>

<style lang="scss" scoped>
.common-layout {
  background-color: white;
  padding: 10px 20px 20px;

  .page {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
  }

  // 标题
  .extra {

    li {
      float: left;
      margin-right: 10px;

      a {
        display: inline-block;
        vertical-align: middle;
        color: #333;
      }

      .txt {
        padding-bottom: 0;
        color: #e4393c;
        border-bottom: 2px solid #e4393c;
        font-weight: 700;
        cursor: pointer;
        display: block;
      }
    }
  }

  // 内容
  .order-table {
    width: 100%;
    border-collapse: collapse;

    thead {
      th {
        height: 32px;
        line-height: 32px;
        text-align: center;
        background: #f5f5f5;
        color: #666;
        font-weight: 400;
        position: relative;
      }

      .ordertime, .order-detail {
        float: left;
      }

      .ordertime {
        position: relative;
        width: 138px;

        .time-txt {
          position: relative;
          height: 30px;
          line-height: 30px;
          text-align: left;
          padding-left: 20px;
          padding-right: 12px;
          border: 1px solid #f5f5f5;
        }
      }

      .order-detail {
        display: inline-block;
        vertical-align: middle;
        position: relative;
        left: 220px;
      }

      &::after {
        content: "";
        display: table;
        clear: both;
      }

    }

    tbody {
      .sep-row {
        height: 20px;

        td {
          border: 0;
        }
      }

      span {
        float: left;
        height: 18px;
        font-size: 12px;
        line-height: 18px;
        padding: 2px 0 0;
      }

      td {
        border: 1px solid #e5e5e5;
        padding: 14px 0;
        border-bottom-color: #f5f5f5;
      }

      .tr-th {
        background: #f5f5f5;
        height: 31px;
        line-height: 31px;
        color: #aaa;
        overflow: hidden;

        .dele-box {
          height: 18px;
          float: right;
          width: 56px;
          cursor: pointer;

          .delete:hover {
            color: #d62222;
          }
        }


        .gap {
          width: 14px;
        }

        .deatiltime {
          margin-right: 30px;
        }

        .number {
          width: 226px;
        }
      }

      .tr-td {
        text-align: center;
        vertical-align: top;

        td {
        }

        .tit {
          width: 588px;
        }

        .goods-item {
          width: 340px;
          margin-right: 74px;
          display: block;
          float: left;

          .p-img {
            float: left;
            width: 60px;
            height: 60px;
            border: 1px solid #efefef;
            margin: 0 14px;
            position: relative;

            img {
              width: 60px;
              height: 60px;
              border: 0;
            }
          }

          .p-msg {
            width: 240px;
            height: 36px;
            line-height: 18px;
            overflow: hidden;
            color: #333;
            text-align: left;
          }
        }

        .goods-number {
          width: 70px;
          float: left;
          text-align: left;
          color: #aaa;
        }

        .goods-repair {
          width: 104px;
          float: right;
          text-align: center;
          position: relative;
          top: -19px;

          .el-dropdown-link {
            cursor: pointer;
            border: none;
            display: flex;
            align-items: center;
          }

          .el-dropdown-link:focus {
            outline: none;
          }

          a {
            color: #666;
          }
        }

        .name {
          width: 101px;
        }

        .consignee {
          position: relative;
          width: 100px;
          height: 20px;
          margin: 0 auto;
          z-index: 2;
          cursor: pointer;
          color: #333;

          .txt {
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            max-width: 72px;
            text-overflow: ellipsis;
            vertical-align: middle;
            position: relative;
            left: 36px;
          }
        }

        .amount {
          color: #AAA;

          .price {
            position: relative;
            left: 32px;
          }

          .ftx {
            position: relative;
            left: 23px;
            display: block;
            margin: 0 8px;
            margin-top: 5px;
            padding-top: 1px;
            border-top: solid 1px #E5E5E5;
            line-height: 19px;
            height: 19px;
            overflow: hidden;
          }
        }

        .status {
          position: relative;
          z-index: 5;
          color: #333;
          line-height: 22px;

          .order-status {
            color: #aaa;
            position: relative;
            left: 32px;
          }
        }

        .orderlist {
          color: #666;
        }

        .operate {
          color: #666;
        }
      }

    }
  }


  .el-header {
    padding: 0;
  }

  .el-main {
    padding: 0;
  }
}
</style>
